<template>
  <div id="blind-box-card">
    <div class="top">
      <div class="music-icon">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/play_music.png" alt="" @click.stop="play(false)" v-if="isShow" class="active-img"/>
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new_blind_box/pause_music.png" alt="" @click.stop="play(true)" v-if="!isShow"/>
        <audio id="audio" ref="audio" loop="loop" controls="controls" autoplay preload :src="audio_link" style="display: none;"></audio>
      </div>
      <div style="height: 1.66rem;" v-if="!timeShow"></div>
      <span class="active-text" v-if="(allDataList.list[activeIndex] && allDataList.list[activeIndex].show_status == 1 || allDataList.list[activeIndex] && allDataList.list[activeIndex].show_status == 0) && timeShow">
        {{ allDataList.list[activeIndex] && allDataList.list[activeIndex].show_status == 0 ? '活动开始倒计时': allDataList.list[activeIndex] && allDataList.list[activeIndex].show_status == 1  ? '活动倒计时' : ''}}: 
        <van-count-down class="van-count" :time="fun.getTimeDifference(allDataList.list[activeIndex] && allDataList.list[activeIndex].show_status == 1 ? allDataList.list[activeIndex].end_time : allDataList.list[activeIndex].start_time)" format="DD天HH时mm分ss秒" ></van-count-down></span>
      <span class="active-text style-padding" v-if="allDataList.list[activeIndex] && allDataList.list[activeIndex].show_status == 2 && timeShow">活动已结束</span>
    </div>
    <swipe :homeIsShow="homeIsShow" :goodsIsShow="goodsIsShow" :allDataList="allDataList" :activeIndex="activeIndex"></swipe>
  </div>
</template>

<script>
import index_controller from "./index_controller";
export default index_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#blind-box-card {
  .top {
    padding-top: 1.5rem;
    margin-bottom: 5.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .music-icon {
      line-height: 1;
      position: absolute;
      left: 1.5rem;
      top: 1.7rem;

      .active-img {
        animation: turn 10s linear infinite;
      }

      img {
        width: 1.2rem;
        height: 1.2rem;
        vertical-align: bottom;
      }
    }

    @keyframes turn {
      0% {
        -webkit-transform: rotate(0deg);
      }

      25% {
        -webkit-transform: rotate(90deg);
      }

      50% {
        -webkit-transform: rotate(180deg);
      }

      75% {
        -webkit-transform: rotate(270deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    .active-text {
      font-size: 0.75rem;
      font-weight: bold;
      padding: 0.33rem 0.55rem;
      color: #ffc001;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;

      .van-count {
        color: #ffc001;
        font-size: 0.75rem;
        line-height: 1;
        font-weight: bold;
        margin-left: 0.2rem;
      }
    }

    .style-padding {
      padding: 0.33rem 3.55rem;
    }
  }
}
</style>
